<template>
	<view>
		<!-- <div class='had' v-if='ObjData.playlist.customKEY'>
			<div>
				<image class="hadImg" :src="ObjData.playlist.coverImgUrl" mode=""></image>
			</div>
			<div class='hadmsg'>
				<text class="musicTitlt">{{ObjData.playlist.name}}</text>
				<div>{{ObjData.playlist.name}}</div>
				<div>最后更新于 {{ObjData.playlist.updateTime|dateFormat}} · {{ObjData.playlist.trackCount}} 首歌 </div>
			</div>
		</div> -->
		<!-- v-else -->
		<div class='hadzd' :style="{'background-image': 'url('+ObjData.playlist.backgroundCoverUrl+')'}">
			<div style='position: absolute;top:30%;'>
				<u-tag shape="circleRight" bg-color='#ffffff54' border-color='#f9f9f9' color='#f9f9f9' mode='plain' type='info ' :text="ObjData.playlist.updateFrequency" />
				
				<text style="padding-left: 1rem;">{{ObjData.playlist.englishTitle}}</text>

				<div class="musicTitlt" style="font-size: 2rem;color: #FFF;letter-spacing:8px;">{{ObjData.playlist.customKEY.name}}</div>	
			</div>

		</div>

		<div>
			<div class='navsearch'>
				<u-search shape="round" v-model='ChangeData' input-align='center' :clearabled="true"
					@clear='clearChange' @change='changeData'></u-search>
				<u-row gutter="16">
					<u-col span="2">
						<u-icon name="play-circle-fill" size="48"></u-icon>
					</u-col>
					<u-col span="6">
						<text class="musicTitlt">全部播放({{filtration.length || ObjData.playlist.tracks.length}})</text>
					</u-col>

					<u-col span="4">
						<u-icon name="tags" size="48"></u-icon>{{ObjData.playlist.subscribedCount | unitConverter}}
					</u-col>
				</u-row>
			</div>
			<div class='MuslicLIst' v-for='item,index in filtration || ObjData.playlist.tracks' :key='index'
				:class='{choice:index == choiceIndex}' @click='choiceIndexFunc(index)'>
				<u-row gutter="16">
					<u-col span="2">
						<image class="MuiscImg" :src="item.al.picUrl" mode=""></image>
					</u-col>
					<u-col span="6">
						<text class="musicTitlt">{{item.name}}</text>
						<div>
							<text v-for='The,index in item.ar' :key='index'>{{The.name}},</text>
						</div>
					</u-col>
					<u-col span="2">
						<text class="musicTitlt">{{item.al.name}}</text>
					</u-col>
					<u-col span="2">
						{{item.dt}}
					</u-col>
				</u-row>
			</div>
			<view class="wrap">
				<u-back-top :scroll-top="scrollTop"></u-back-top>
			</view>
		</div>

	</view>
</template>

<script>
	import {
		specialPlaylist
	} from '../../../../../static/js/staticData.js';
	export default {
		data() {
			return {
				scrollTop: 0,
				ChangeData: '',
				choiceIndex: '',
				filtration: '',
				ObjData: {
					playlist: '',
					privileges: ''
				},
			};
		},
		onLoad({
			id
		}) {
			this.getMusicInfoData(id)
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			/**
			 * @param {Object} e收索的值
			 */
			changeData(e) {
				this.filtration = [];
				this.ObjData.playlist.tracks.forEach(item => {
					let UserName = item.ar.map(ar => ar.name)
					if (item.name.includes(e) || item.al.name.includes(e) || UserName.includes(e)) {
						this.filtration.push(item)
					}
				})
			},
			/**
			 * 删除按钮触发
			 */
			clearChange() {
				this.filtration = [];
				console.log(this.filtration, this.ChangeData);
			},
			/**
			 * 获取数据
			 */
			async getMusicInfoData(id = 3136952023) {
				const {
					playlist,
					privileges
				} = await this.MusicRequest('playlist/detail', {
					id,
					timestamp: new Date().getTime()
				});
				playlist.customKEY = specialPlaylist[playlist.id]
				console.log();
				this.ObjData = {
					playlist,
					privileges
				}
			},
			/**
			 * 	选中列表某一条数据
			 * @param {Object} index 选中的下标
			 */
			choiceIndexFunc(index) {
				this.choiceIndex = index;
			}
		}
	}
</script>

<style lang="less">
	@import '../../../../../static/css/mlmCommon.less';

	.had {
		display: flex;
		padding: 20rpx;
		width: 100%;
	}

	.hadzd {
		background-image: url(../../../../../static/logo.png);
		width: 100%;
		height: 15rem;
		background-size: cover;
		color: #FFF;
		display: table-cell
	}

	.hadmsg {
		line-height: 50rpx;
		margin-left: 20rpx;
	}

	.musicTitlt {
		.fontFamily(PingFang SC, #000, 700);
	}

	.hadImg {
		.square(200rpx, 200rpx);
	}

	.MuiscImg {
		.square(80rpx, 80rpx);
		z-index: -1;
	}

	.navsearch {
		width: 95%;
		margin: auto;
		height: 150rpx;
		position: sticky;
		top: 86rpx;
		background: rgba(255, 255, 255, .9);
		box-shadow: 3px 3px 6px 3px rgb(0 0 0 / 4%);

		padding: 10rpx;
	}

	.MuslicLIst /deep/ .u-row {
		padding: 10rpx;
	}

	.navsearch /deep/.u-row {
		padding-top: 25rpx;
	}

	.choice {
		background: #dad5d526;
	}
</style>
